<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vuex.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',
                data:{
                    msg:'',
                    index:1,
                    list:[]
                },
                methods:{
                    addMemo(){
                        var memo={
                            id:this.index,
                            msg:this.msg,
                            time:new Date().toLocaleString(),
                        };
                        this.list.push(memo);
                        this.msg='';
                        this.index++;
                    },
                    delMemo(id){
                        this.list=this.list.filter(function(item){
                            return item.id!=id
                        })
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <h2>备忘录</h2>
        <form action="#" @submit.prevent='addMemo'>
            <input type="text" v-model='msg'>
            <input type="submit" value="保存">
        </form>
        <ul>
            <li v-for='item in list'>
                <span>{{item.id}}、</span>
                <span>{{item.msg}}、</span>
                <span>{{item.time}}</span>
                <a href="#" @click.prevent='delMemo(item.id)'>删除</a>
            </li>
        </ul>
    </div>
</body>
</html>